<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                    v-model="buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="日期">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="monthvalue"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用户">
                  <FilterSelect2
                    v-model="customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="操作类型">
                  <el-select size="small" v-model="type" style="width: 100%;" clearable >
                    <el-option v-for="(item,index) in caozuolist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="margin-top: 4px;text-align: right;">
                <el-button size="small" @click="chongzhi">重 置</el-button>
                <el-button type="primary" size="small" @click="chaxun">查 询</el-button>
              </el-col>
          </el-row>
      </el-form>
      <!-- <div>
        <span style="font-size: 14px;color: #606266;">建筑群</span>
        <span>
          <el-select size="small" v-model="buildingId" @change="changeqiye">
            <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
          </el-select>
        </span>
        <span style="font-size: 14px;color: #606266;">日期</span>
        <span>
          <el-date-picker
           v-model="monthvalue"
           type="daterange"
           size="small"
           value-format="yyyy-MM-dd"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
        </span>
        <span style="font-size: 14px;color: #606266;">用户</span>
        <span>
          <el-select size="small" v-model="customerId" filterable >
            <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.customerName" :value="item.id" class="option"></el-option>
          </el-select>
        </span>
        <span style="font-size: 14px;color: #606266;">操作类型</span>
        <span>
          <el-select size="small" v-model="type">
            <el-option v-for="(item,index) in caozuolist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
          </el-select>
        </span>
      </div>
      <div>
        <el-button size="small" @click="chongzhi">重置</el-button>
        <el-button type="primary" size="small" @click="chaxun">查询</el-button>
      </div> -->
    </div>
    <div class="bodybox">
      <div class="title">
        <div class="butti">
          <div>财务对账</div>
          <div style="display: flex;">
            <span style="margin-right: 10px;"><el-button @click="piliang" type="primary" size="small">
              <i style="font-size: 12px;" class="iconfont icon-wj-zd"></i> 批量对账</el-button></span>
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
        :size="issize"
          border
          height="calc(100% - 1px)"
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            :selectable="selected"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="用户信息">
          </el-table-column>
          <el-table-column
            prop="operationTypeName"
            label="操作类型">
          </el-table-column>
          <el-table-column
            prop="payTypeName"
            label="缴费类型">
          </el-table-column>
          <el-table-column
            prop="amount"
            align="right"
            label="金额(元)">
          </el-table-column>
          <el-table-column
            prop="operationTime"
            align="center"
            width="180"
            label="操作时间">
          </el-table-column>
          <el-table-column
            prop="checkFlagName"
            align="center"
            label="是否对账">
            <template #default="{row}">
              <span v-if="row.checkFlagName=='未对账'"  class="states red"></span>
              <span v-else class="states green"></span>
              <span>{{ row.checkFlagName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="checkUserName"
            label="对账人">
          </el-table-column>
          <el-table-column
            prop="checkTime"
            align="center"
            width="180"
            label="对账时间">
          </el-table-column>
          <el-table-column
          label="操作"
          width="120"
          align="center">
          <template #default="{row}">
            <el-button :disabled="row.checkFlagName=='已对账'" size="small" type="primary" @click="duizhang(row)">
              <i style="font-size: 12px;" class="iconfont icon-zongzhangdan"></i> 对账
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div class="text">合计：线上收入{{ entity.onLineRecharge }}元，线下收入{{ entity.offLineRecharge }}元，退费{{ entity.refund }}元</div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="getdatalist"
                :total="+totalCount">
        </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { gettabledatalistapi, gettotalapi, postduizhangapi } from '@/api/prwpaid/cost-management/Financial-reconciliation'
import { getzidianxialaapi } from '@/api/guidelines'
import { gettablelistapi } from '@/api/prwpaid/user-manage/OpenAaccount'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data () {
    return {
      type: '',
      customerId: '',
      loading: false,
      monthvalue: ['', ''],
      buildingId: '',
      issize: 'medium',
      qiyelist: [],
      yonghulist: [],
      caozuolist: [],
      tableData: [],
      totalCount: '',
      pageobj: {
        pageNo: 1,
        pageSize: 20
      },
      entity: {},
      array: []
    }
  },

  async mounted () {
    // 获取操作类型
    const yonghu = await getzidianxialaapi({ dictType: 'MBM_COST_OPERATION_TYPE' })
    this.caozuolist = yonghu.data.list
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId)
    if (isBuildIdInArray) {
      this.buildingId = localbuildingId || ''
      this.getyonghuxialalist(this.buildingId)
    } else {
      this.buildingId = ''
    }

    this.getdatalist()
    this.gettotal()
  },

  methods: {
    // 企业下拉
    changeqiye (val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist (val) {
      const ress = await gettablelistapi({
        pageNo: 0,
        pageSize: 500,
        startDate: '',
        endDate: '',
        state: '20',
        buildingId: val,
        customerType: ''
      })
      this.yonghulist = ress.data.list
    },
    // 表格多选
    handleSelectionChange (val) {
      this.array = val.map(ele => ele.id)
    },
    // 批量对账
    piliang () {
      if (this.array.length == '0') return this.$message.warning('请先选择要进行对账的数据')
      this.$confirm('此操作将与选中的用户进行批量对账, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postduizhangapi({ ids: this.array.join(',') }).then(res => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message: res.code == '200' ? '批量对账成功' : res.message
            })
          })
          this.chaxun()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量对账'
          })
        })
    },
    // 获取总数据
    async gettotal () {
      const { data: { entity } } = await gettotalapi({
        buildingId: this.buildingId,
        customerId: this.customerId,
        type: this.type,
        startDate: this.monthvalue[0],
        endDate: this.monthvalue[1]
      })
      this.entity = entity
    },
    // 获取表格数据
    async getdatalist () {
      this.loading = true
      const { data: { list, totalCount } } = await gettabledatalistapi({
        buildingId: this.buildingId,
        customerId: this.customerId,
        pageNo: this.pageobj.pageNo - 1,
        pageSize: this.pageobj.pageSize,
        type: this.type,
        startDate: this.monthvalue[0],
        endDate: this.monthvalue[1]
      })
      this.tableData = list
      this.totalCount = totalCount
      console.log(this.totalCount)
      this.loading = false
    },
    // 对账
    duizhang (row) {
      this.$confirm('此操作将与该用户进行对账, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postduizhangapi({ ids: row.id }).then(res => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message: res.code == '200' ? '对账成功' : res.message
            })
          })
          this.chaxun()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消对账'
          })
        })
    },
    // 查询
    chaxun () {
      this.getdatalist()
      this.gettotal()
    },
    // 表格禁用
    selected (val, row) {
      if (val.checkFlagName == '已对账') {
        return false
      } else {
        return true
      }
    },
    // 重置
    chongzhi () {
      localStorage.removeItem('buildingId')
      this.buildingId = ''
      this.customerId = ''
      this.type = ''
      this.monthvalue = ['', '']
      this.chaxun()
    },
    // 调节表格密度
    command (val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu () {
      exportexcel('mbm-microservice-biz/mbm/cost/reconciliation/exportExcel', {
        buildingId: this.buildingId,
        customerId: this.customerId,
        type: this.type,
        startDate: this.monthvalue[0],
        endDate: this.monthvalue[1]
      }, '财务对账')
    },
    // 刷新列表
    shuaxin () {
      this.chaxun()
      this.$message.success('列表刷新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .fenye{
      text-align: right;
    }
    .butti{
      display: flex;
      justify-content: space-between;
      }
      .table{
        height: 85%;
        margin-top: 10px;
        .states{
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 50%;
          }
          .red{
            background-color:red;
          }
          .green{
            background-color: #13ce66;
          }
      }
      .text{
        background-color: #fafafa;
        font-size: 14px;
        padding: 10px;
        color: #333;
      }
  }
}
</style>